<template>
  <div style="display: flex; width: 100%;">
    <el-input v-model="url" type="text" style="width: 60%" /> &nbsp; &nbsp;
    <br />
    <el-button @click="join" type="primary">连接</el-button>
    <el-button @click="exit" type="danger">断开</el-button>

    <br />
    <el-input type="textarea" v-model="message" :rows="9" />
    <el-button type="info" @click="send">发送消息</el-button>
    <el-button type="info" @click="receive">接收消息</el-button>
    <el-button type="info" @click="upwindow">弹窗</el-button>
    <br />
    <br />
    <el-input type="textarea" v-model="text_content" :rows="9" /> 返回内容
    <br />
    <br />
  </div>
</template>

<script>
import { Notification } from "element-ui";
export default {
  data() {
    return {
      url: "ws://192.168.0.8:8080/websocket/message",
      message: "",
      text_content: "",
      ws: null,
      msgObj: {
        msg: 'rain',
        level: 1,
        time: '2023-12-08 09:10',
        status: 0
      }
    };
  },
  methods: {
    join() {
      console.log('this.url', this.url)
      const wsuri = this.url;
      this.ws = new WebSocket(wsuri);
      const self = this;
      this.ws.onopen = function (event) {
        self.text_content = self.text_content + "已经打开连接!" + "\n";
      };
      this.ws.onmessage = function (event) {
        self.text_content = event.data + "\n";
      };
      this.ws.onclose = function (event) {
        self.text_content = self.text_content + "已经关闭连接!" + "\n";
      };
    },
    exit() {
      if (this.ws) {
        this.ws.close();
        this.ws = null;
      }
    },
    send() {
      if (this.ws) {
        this.ws.send(this.message);
        this.$modal.msg("默认反馈")
      } else {
        alert("未连接到服务器");
      }
    },
    receive() {
      // const wsuri = this.url;
      // this.ws = new WebSocket(wsuri);
      this.ws.addEventListener('message', (event) => {
        const message = event.data;
        console.log('收到消息：', message);
      })
    },
    upwindow() {
      let _this = this
      // const h = this.$createElement;
      Notification.warning({
          title: _this.msgObj.msg,
          dangerouslyUseHTMLString: true,
          // message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'),
          message: `<div>时间：${_this.msgObj.time}</div> <div>级别：${_this.msgObj.level} 级</div> <div>状态：${_this.msgObj.status ? '已处理': '未处理'} </div>`,
          onClick: function () {
            // self.warnDetailByWarnid(messageBody.warnId); //自定义回调,message为传的参数
            // 点击跳转的页面
            // this.exit()
            console.log('处理')
            _this.lianxi()
          }
        })
    },
    lianxi() {
      console.log('练习')
    }
  }
};
</script>
